import { useState, forwardRef, useImperativeHandle } from "react";

interface PropsTestProps {
    count: any;
    changeCount: Function;
    msg?: string;
}

interface PropsTestRef {
    updateMsg: (newMsg: string) => void;
}

const PropsTest = forwardRef<PropsTestRef, PropsTestProps>(({ count, changeCount, msg: initialMsg = "子组件内容" }, ref) => {
    const [msg, setMsg] = useState(initialMsg);
    
    // 暴露方法给父组件
    useImperativeHandle(ref, () => ({
        updateMsg: (newMsg: string) => {
            setMsg(newMsg);
        }
    }));
    
    return (
        <div>
            <h2>{msg}</h2>
            传入的值是：{count}
            &nbsp;&nbsp;
            <button onClick={() => changeCount(100)} className='mainButton'>子传父</button>
        </div>
    );
});

PropsTest.displayName = "PropsTest";

export default PropsTest;